import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

function Dialog(props) {
  const [node, setNode] = useState(window.document.createElement('div'));
  console.log('==>', 1);
  useEffect(() => {
    console.log('==>', 2);
    window.document.body.appendChild(node);
    return () => {
      console.log('==>', 3);
      if (node) window.document.body.removeChild(node);
    };
  }, []);

  return createPortal(<div className="portal-container">{<div className="portal-content">Dialog</div>}</div>, node);
}

export default Dialog;
